<template>
    <el-row class="components-container" :gutter="20">
        <el-col
            :xs="24"
            :sm="config.sm"
            :md="config.md"
            :lg="config.lg"
            :xl="config.xl"
            v-for="(value,key,index) in list"
            style="margin-bottom: 20px;"
            :key="index">
            <Kanban
                :list="value"
                :header-background="headerBackground(index)"
                :list-height="listHeight"
                :options="options"
                class="kanban todo"
                @sendChangeItem="getChangeItem"
                @loadMore="loadMore"
                :header-text="map[key]"
                :header-id="key"
            />
        </el-col>
    </el-row>
</template>
<script>
import Kanban from '@/components/Kanban'
import { cardformInitDataForDutys, dutyAction } from '@/api/api'

export default {
    name: 'PM_FEEDLISTJINDU_VUE',
    components: {
        Kanban: Kanban
    },
    data: function data() {
        return {
            options: {
                group: 'mission',
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'chosenClass',
                scroll: true,
                scrollSensitivity: 200
            },
            formId: '6628',
            pager: {
                offset: 1,
                limit: 10
            },
            list: {},
            listHeight: '500px',
            headerBackgroundList: ['#4A9FF9', '#F9944A', '#2A604D'],
            config: {
                sm: 8,
                md: 8,
                lg: 8,
                xl: 8
            },
            amount: 3,
            map: {

                '1': '未执行',

                '2': '执行中',

                '3': '已完成'

            },
            pageMap: {
                '1': {
                    page: 1,
                    init: false
                },
                '2': {
                    page: 1,
                    init: false
                },
                '3': {
                    page: 1,
                    init: false
                }
            },
            // 默认第一个的key
            currentId: '1',
            jsonConfig: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'icon-grid-', 'columns': [{ 'span': 4, 'list': [{ 'type': 'title', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_cname##', 'inline': false, 'textAlign': 'center', 'color': '#000', 'fontSize': '24px', 'fontWeight': 600, 'marginLeft': '0px', 'marginRight': '0px', 'titleHeight': '', 'lineHeight': '', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560938438000_77180' }, 'key': '1560938438000_77180', 'model': 'title_1560938438000_77180', 'rules': [] }] }, { 'span': 20, 'list': [{ 'type': 'title', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_RWCNAME##', 'inline': false, 'textAlign': 'center', 'color': '#000', 'fontSize': '18px', 'fontWeight': 600, 'marginLeft': '0px', 'marginRight': '0px', 'titleHeight': '', 'lineHeight': '', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560938440000_80487' }, 'key': '1560938440000_80487', 'model': 'title_1560938440000_80487', 'rules': [] }] }], 'options': { 'gutter': 10, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1560938397000_94452' }, 'key': '1560938397000_94452', 'model': 'grid_1560938397000_94452', 'rules': [] }, { 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_GLFORMC##', 'type': 'success', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '10px', 'marginRight': '5px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560740223000_9739' }, 'key': '1560740223000_9739', 'model': 'tag_1560740223000_9739', 'rules': [] }, { 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_ZRDEPID##', 'type': 'info', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '5px', 'marginRight': '5px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560740225000_23213' }, 'key': '1560740225000_23213', 'model': 'tag_1560740225000_23213', 'rules': [] }, { 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_ZRCNAME##', 'type': 'warning', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '5px', 'marginRight': '5px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560740227000_36521' }, 'key': '1560740227000_36521', 'model': 'tag_1560740227000_36521', 'rules': [] }, { 'type': 'tag', 'name': '', 'icon': 'icon-input', 'options': { 'defaultValue': '##P|PMFEEDLISTJINDU_PHONES##', 'type': 'danger', 'hit': false, 'tagColor': '', 'size': 'small', 'marginLeft': '5px', 'marginRight': '10px', 'linkType': 'inline', 'linkUrl': '', 'query': '', 'remoteFunc': 'func_1560740228000_8257' }, 'key': '1560740228000_8257', 'model': 'tag_1560740228000_8257', 'rules': [] }], 'config': { 'formId': '6628|1', 'labelWidth': 100, 'labelPosition': 'top', 'size': 'small', 'column': 1, 'xl': 8, 'lg': 8, 'md': 8, 'sm': 8, 'height': '80px' }},
            jsonData: {
                'formId': '6628',
                'templateJsons': {

                    '1': "{'list':[{'type':'grid','name':'栅格布局','icon':'icon-grid-','columns':[{'span':4,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_cname##','inline':false,'textAlign':'center','color':'#000','fontSize':'24px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560938438000_77180'},'key':'1560938438000_77180','model':'title_1560938438000_77180','rules':[]}]},{'span':20,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_RWCNAME##','inline':false,'textAlign':'center','color':'#000','fontSize':'18px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560938440000_80487'},'key':'1560938440000_80487','model':'title_1560938440000_80487','rules':[]}]}],'options':{'gutter':10,'justify':'start','align':'top','remoteFunc':'func_1560938397000_94452'},'key':'1560938397000_94452','model':'grid_1560938397000_94452','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_GLFORMC##','type':'success','hit':false,'tagColor':'','size':'small','marginLeft':'10px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740223000_9739'},'key':'1560740223000_9739','model':'tag_1560740223000_9739','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRDEPID##','type':'info','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740225000_23213'},'key':'1560740225000_23213','model':'tag_1560740225000_23213','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRCNAME##','type':'warning','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740227000_36521'},'key':'1560740227000_36521','model':'tag_1560740227000_36521','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_PHONES##','type':'danger','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'10px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740228000_8257'},'key':'1560740228000_8257','model':'tag_1560740228000_8257','rules':[]}],'config':{'formId':'6628|1','labelWidth':100,'labelPosition':'top','size':'small','column':1,'xl':8,'lg':8,'md':8,'sm':8,'height':'80px'}}",

                    '2': "{'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'','inline':false,'textAlign':'center','color':'#3566CF','fontSize':'12px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740424000_49456','iconName':'icon-card'},'key':'1560740424000_49456','model':'title_1560740424000_49456','rules':[]},{'type':'grid','name':'栅格布局','icon':'icon-grid-','columns':[{'span':4,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_cname##','inline':false,'textAlign':'center','color':'#000','fontSize':'24px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560939699000_32218'},'key':'1560939699000_32218','model':'title_1560939699000_32218','rules':[]}]},{'span':20,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_RWCNAME##','inline':false,'textAlign':'center','color':'#000','fontSize':'18px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560939701000_87467'},'key':'1560939701000_87467','model':'title_1560939701000_87467','rules':[]}]}],'options':{'gutter':0,'justify':'start','align':'top','remoteFunc':'func_1560939688000_18133'},'key':'1560939688000_18133','model':'grid_1560939688000_18133','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_GLFORMC##','type':'success','hit':false,'tagColor':'','size':'small','marginLeft':'10px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740497000_79686'},'key':'1560740497000_79686','model':'tag_1560740497000_79686','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRDEPID##','type':'info','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740499000_35393'},'key':'1560740499000_35393','model':'tag_1560740499000_35393','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRCNAME##','type':'warning','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740500000_35443'},'key':'1560740500000_35443','model':'tag_1560740500000_35443','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_PHONES##','type':'danger','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'10px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740502000_10747'},'key':'1560740502000_10747','model':'tag_1560740502000_10747','rules':[]}],'config':{'formId':'6628|2','labelWidth':100,'labelPosition':'top','size':'small','column':1,'xl':24,'lg':24,'md':24,'sm':24,'height':'80px'}}",

                    '3': "{'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'','inline':false,'textAlign':'center','color':'#153BAD','fontSize':'12px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740636000_98538','iconName':'icon-card'},'key':'1560740636000_98538','model':'title_1560740636000_98538','rules':[]},{'type':'grid','name':'栅格布局','icon':'icon-grid-','columns':[{'span':4,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_cname##','inline':false,'textAlign':'center','color':'#000','fontSize':'24px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560939861000_87912'},'key':'1560939861000_87912','model':'title_1560939861000_87912','rules':[]}]},{'span':20,'list':[{'type':'title','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_RWCNAME##','inline':false,'textAlign':'center','color':'#000','fontSize':'16px','fontWeight':600,'marginLeft':'0px','marginRight':'0px','titleHeight':'','lineHeight':'','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560939863000_39053'},'key':'1560939863000_39053','model':'title_1560939863000_39053','rules':[]}]}],'options':{'gutter':0,'justify':'start','align':'top','remoteFunc':'func_1560939838000_76114'},'key':'1560939838000_76114','model':'grid_1560939838000_76114','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_GLFORMC##','type':'success','hit':false,'tagColor':'','size':'small','marginLeft':'10px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740655000_82839'},'key':'1560740655000_82839','model':'tag_1560740655000_82839','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRDEPID##','type':'info','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740657000_1532'},'key':'1560740657000_1532','model':'tag_1560740657000_1532','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_ZRCNAME##','type':'warning','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'5px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740658000_8008'},'key':'1560740658000_8008','model':'tag_1560740658000_8008','rules':[]},{'type':'tag','name':'','icon':'icon-input','options':{'defaultValue':'##P|PMFEEDLISTJINDU_PHONES##','type':'danger','hit':false,'tagColor':'','size':'small','marginLeft':'5px','marginRight':'10px','linkType':'inline','linkUrl':'','query':'','remoteFunc':'func_1560740659000_58499'},'key':'1560740659000_58499','model':'tag_1560740659000_58499','rules':[]}],'config':{'formId':'6628|3','labelWidth':100,'labelPosition':'top','size':'small','column':1,'xl':24,'lg':24,'md':24,'sm':24,'height':'80px'}}"

                }
            }
        }
    },
    created: function created() {
        this._cardformInitDataForDutys()
    },

    methods: {
        _cardformInitDataForDutys() {
            const params = Object.assign(this.jsonData, this.pager)
            cardformInitDataForDutys(params, '1,2,3', '')
                .then((res) => {
                    console.log(res)
                    if (res) {
                        this.firstInit = true
                        this.list = res
                        for (const key in res) {
                            if (res.hasOwnProperty(key)) {
                                const element = res[key]
                                if (element.length) {
                                    this.config = element[0].jsonObj.config
                                    return
                                }
                            }
                        }
                    }
                }).catch(function(error) {
                    console.log(error)
                })
        },
        loadMore(e) {
            console.log(e)
            if (!this.pageMap[e.id].init) {
                this.pageMap[e.id].init = true
                return
            }

            this.pageMap[e.id].page++
            const params = {
                formId: this.formId,
                templateJsons: this.jsonData.templateJsons,
                offset: this.pageMap[e.id].page,
                limit: 10
            }
            cardformInitDataForDutys(params, e.id, '')
                .then(res => {
                    this.list[e.id] = this.list[e.id].concat(res[e.id])
                })
            // console.log('11111')
        },
        getChangeItem(data) {
            var _this2 = this

            console.log(data, '参数')
            data.formId = this.formId
            dutyAction(data).then(function(res) {
                console.log(res)
                _this2._cardformInitDataForDutys()
            })
        },
        headerBackground(index) {
            return this.headerBackgroundList[index % this.headerBackgroundList.length]
        }
    }
}
</script>
